<template>
	<view class="view-express">
		<NavBar title="查看物流" :left="true" pos="fixed" />
		<view class="map" :style="{ height:mapH, paddingTop:padTop }" v-if="orderStatus=='1'">
			<!-- <map latitude="34.69759690222702" longitude="112.53568717759379" :markers="maker" style="width: 100%; height: 100%;"></map> -->
		</view>
		<!-- 内容区域 -->
		<view class="content" :class="orderStatus !='1'? 'a-content':''">
			<!-- 导航 -->
			<view class="address">
				<view class="add-title" v-if="orderStatus== '1'"> 预计&nbsp;&nbsp;<text>19:20内</text>&nbsp;&nbsp;送达 </view>
				<view class="add-title" v-else> 已送达 </view>
				<view class="add-time" v-if="orderStatus== '1'"> 预计送达时间：2024-10-08 19:20:00 </view>
				<view class="add-time" v-else> 送达时间：2024-10-08 19:20:00 </view>
				<view class="add-nav">
					<view class="km"> 
						<view> 
							<text> 12 </text>
							<text> km </text>
						</view>
						<view> 
							<text> 12 </text>
							<text> m </text>
						</view>
					</view>
					<view class="add-name">
						<view class="shop-address">
							<view>幸运咖啡点店</view>
							<view>河岸上对大赛i的华盛顿你算的那速度89号</view>
						</view>
						<view class="kh-address"> 安亭工业园-7呼唤1919室 </view>
					</view>
					<view class="loaction">
						<image src="/static/icon/mine/nav.png" class="l-img"/>
						导航
					</view>
				</view>
			</view>
			<!-- 商品清单 -->
			<view class="goods-list">
				<view class="goods-list-title"> 商品清单(1) </view>
				<GoodsItem />
			</view>
			<!-- 配送信息 -->
			<view class="ps-info">
				<view class="ps-titlt"> 配送信息 </view>
				<view class="ps-list">
					<view class="item">
						<view class="label"> 配送员 </view>
						<view class="value"> 张青 </view>
					</view>
					<view class="item">
						<view class="label"> 接单时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
					<view class="item">
						<view class="label"> 到店时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
					<view class="item">
						<view class="label"> 取货时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
					<view class="item">
						<view class="label"> 送达时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="order-title"> 订单信息 </view>
				<view class="order-list">
					<view class="item">
						<view class="label"> 订单编号 </view>
						<view class="value"> 
							20202323254151151515174841515
							<image src="/static/icon/order/copy.png" @tap="copy" class="v-img"/>
						</view>
					</view>
					<view class="item">
						<view class="label"> 下单时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
					<view class="item">
						<view class="label"> 支付时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
					<view class="item">
						<view class="label"> 支付方式 </view>
						<view class="value"> 微信支付 </view>
					</view>
					<view class="item">
						<view class="label"> 预约送货时间 </view>
						<view class="value"> 2024-11-11 14:20:15 </view>
					</view>
					<view class="item">
						<view class="label"> 商品金额 </view>
						<view class="price"> 29.98 </view>
					</view>
					<view class="item">
						<view class="label"> 配送费 </view>
						<view class="price"> 10.00 </view>
					</view>
					<view class="item">
						<view class="label"> 实付金额 </view>
						<view class="price"> 39.99 </view>
					</view>
					<view class="item intro">
						<view class="label"> 备注 </view>
						<view class="value"> 预约送货时间预约送货时间预约送货时间预约送货时间预约送货时间预约送货时间预约送货时间 </view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-box">
			<view class="btn" @tap="popupRef.open()">
				<image src="/static/icon/mine/kf.png" class="b-img"/>
				联系配送员
			</view>
			<view class="btn" @tap="popupRef.open()">
				<image src="/static/icon/order/contact.png" class="b-img"/>
				联系商家
			</view>
			<view class="pj" v-if="orderStatus != '1'" @tap="goReview"> 评价配送员 </view>
		</view>
		<!-- 弹窗 -->
		<BottomSelect :btnArr="['联系配送员', '联系商家']" ref="popupRef" @selected="selected"/>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onPageScroll, onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import GoodsItem from '@/components/GoodsItem.vue'
	import BottomSelect from '@/components/BottomSelectPopup.vue'
	import { ViewExpressApi } from '@/service/index.js'
	const { safeAreaInsets, safeArea } = uni.getSystemInfoSync()
	const popupRef = ref()
	const orderStatus = ref('1')
	const padTop = computed(() => {
		return safeAreaInsets.top + 'px'
	})
	const mapH = computed(() => {
	 return	safeArea.width + 'px'
	})
	const maker = ref([
		{
				id: 1,
				latitude: 34.697596,
				longitude: 112.535687,
				iconPath: "/static/icon/components/location.png",
				width: 20,
				height: 20,
				number: 0,
				customCallout: {
					anchorY: 0, // Y轴偏移量
					anchorX: 0, // X轴偏移量
					display: "ALWAYS" // 一直展示
				}
			}
	])
	const  goBack = () => {
		uni.navigateBack()
	}
	const copy = () => {
		uni.setClipboardData({
			data: '15236242222',
			success:() => getApp().globalData.toast('复制成功')
		});
	}
	const selected = (e) => {
		console.log(e);
	}
	// 拨打电话
	const callConfirm = () => {
		uni.makePhoneCall({
			phoneNumber: '15236242399',
			complete: (e) => {
				console.log(e);
			}
		})
		popupRef.value.close()
	}
	// 去评价
	const goReview = () => {
		uni.navigateTo({
			url: '/pages/review/review?type=3'
		})
	}
	onLoad((e) => {
		console.log(e);
		ViewExpressApi({order_id: e.id}).then(res => {
			console.log(res);
		})
	})
	// onPageScroll((e) => {
	// 	const { scrollTop } = e
	// 	console.log('onPageScroll', scrollTop);
	// })
</script>

<style lang="scss" scoped>
	.view-express {
		.map { }
		.content {
			width: 100%;
			padding: 0 12px;
			padding-bottom: 68px;
			box-sizing: border-box;
			transform: translateY(-20px);
			&.a-content {
				padding-top: 12px;
				transform: translateY(0);
			}
			// 地址
			.address {
				padding: 21px 10px 11px;
				background-color: #fff;
				border-radius: 10px;
				.add-title {
					font-weight: 500;
					font-size: 20px;
					color: #333333;
					line-height: 20px;
					text {
						color: #FF3B1E;
					}
				}
				.add-time {
					color: #999999;
					font-size: 14px;
					font-weight: 400;
					margin-top: 10px;
					line-height: 20px;
					padding-bottom: 10px;
					border-bottom: 1px solid #eeeeee;
					box-sizing: border-box;
				}
				.add-nav {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10px;
					.km {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #FF3B1E;
						font-size: 12px;
						font-weight: 400;
						text-align: center;
						margin-right: 12px;
						view {
							margin-bottom: 32px;
							display: flex;
							flex-direction: column;
							align-items: center;
							&:nth-last-of-type(1) {
								position: relative;
								margin-bottom: 0;
								&::before {
									position: absolute;
									top: -28px;
									left: 50%;
									transform: translateX(-50%);
									display: block;
									content: '';
									width: 1px;
									height: 24px;
									background-color: #d8d8d8;
								}
							}
						}
					}
					.add-name {
						// display: flex;
						// justify-content: space-between;
						.shop-address {
							font-weight: 500;
							font-size: 14px;
							color: #333333;
							line-height: 20px;
							view {
								&:nth-last-of-type(1) {
									color: #999999;
									font-size: 12px;
									margin-top: 4px;
									font-weight: 400;
								}
							}
						}
						.kh-address {
							color: #333333;
							font-size: 14px;
							font-weight: 500;
							line-height: 20px;
							margin-top: 10px;
						}
					}
					.loaction {
						color: #999999;
						font-size: 12px;
						font-weight: 400;
						line-height: 20px;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-left: 69px;
						.l-img {
							width: 34px;
							height: 34px;
							margin-bottom: 3px;
						}
					}
				}
			}
			// 商品清单
			.goods-list {
				margin-top: 10px;
				width: 100%;
				border-radius: 10px;
				background-color: #fff;
				padding: 16px 11px 10px 14px;
				box-sizing: border-box;
				.goods-list-title {
					font-weight: 500;
					font-size: 16px;
					color: #333333;
					line-height: 20px;
					margin-bottom: 18px;
				}
			}
			// 配送信息/订单信息
			.ps-info, .order-info {
				width: 100%;
				padding: 16px 12px 10px;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10px;
				margin-top: 10px;
				.ps-titlt, .order-title {
					font-weight: 500;
					font-size: 16px;
					color: #333333;
					line-height: 19px;
					margin-bottom: 16px;
				}
				.ps-list, .order-list {
					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 12px;
						&:nth-last-of-type(1) {
							margin-bottom: 0;
						}
						.label {
							font-weight: 400;
							font-size: 14px;
							color: #666666;
							line-height: 19px;
						}
						.value {
							font-weight: 400;
							font-size: 14px;
							color: #333333;
							line-height: 17px;
							.v-img {
								width: 16px;
								height: 16px;
								margin-left: 3px;
							}
						}
						.price {
							font-weight: 400;
							font-size: 14px;
							color: #FF3B1E;
							line-height: 17px;
						}
					}
					.intro {
						display: block;
						.label {
							margin-bottom: 8px;
						}
					}
				}
			}
		}
			// 底部按钮
			.btn-box {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #fff;
				height: 50px;
				display: flex;
				padding: 0 12px;
				align-items: center;
				.btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-weight: 400;
					font-size: 12px;
					color: #666666;
					line-height: 17px;
					margin-right: 23px;
					.b-img {
						width: 22px;
						height: 22px;
						margin-bottom: 2px;
					}
				}
				.pj {
					width: 184px;
					height: 40px;
					color: #FFFFFF;
					font-size: 16px;
					font-weight: 400;
					line-height: 40px;
					text-align: center;
					background: #FF3B1E;
					border-radius: 99px;
					position: absolute;
					right: 12px;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.popup-content {
				// display: flex;
				border-radius: 10px 10px 0 0;
				box-sizing: border-box;
				background-color: #f2f2f2;
				.item {
					text-align: center;
					background-color: #fff;
					height: 56px;
					line-height: 56px;
					&:nth-of-type(1) {
						border-radius: 10px 10px 0 0;
						border-bottom: 1px solid #eeeeee;
						box-sizing: border-box;
					}
					&:nth-last-of-type(1) {
						margin-top: 10px;
					}
				}
			}
	}
</style>
